<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
	<title>百度地图样板</title>
	<script src="http://code.jquery.com/jquery-1.5.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=RNg9Hr2kE0wIADsC2TdLFFUoB5rTCHdi&services=true"></script>
	<style>
	    *{padding: 0;margin: 0;}
		html{height: 100%;}
		body{height: 100%;width: 100%;background-color: #000;}
		#dituContent{height: 100%;width: 100%;}
	</style>
</head>
<body>
<div data-role="content" id="dituContent">
	<script type="text/javascript">
		/**
		 * 一、创建地图
		 * @type {BMap}
		 */
		var map = new BMap.Map("dituContent"); //创建地图实例
		var point = new BMap.Point(121.4804, 31.2365);//创建点坐标 										
		map.centerAndZoom(point, 15);//初始化地图，设置中心点坐标和地图级别
		map.enableScrollWheelZoom(true);
		// map.addControl(new BMap.ScaleControl()); //添加比例尺控件
	    // map.addControl(new BMap.GeolocationControl());//负责进行地图定位的控件
	    

	    /**
	     * 二、Marker添加标注
	     * @type {BMap}
	     */
	    // var marker = new BMap.Marker(point);  // 创建标注
	    // map.addOverlay(marker);
	 //    marker.addEventListener("click",getAttr);
	 //    function getAttr(){
		// 	var p = marker.getPosition();       //获取marker的位置
		// 	console.log("marker的位置是" + p.lng + "," + p.lat);   
		// }

// 		function addMarker(point,index){
// 			var myIcon =new BMap.Icon("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509615133834&di=4005884791c42df0d854cd64f3d7a7d2&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F15%2F41%2F90%2F19658PICzn8_1024.png",new BMap.Size(23,25),{
// 				// 指定定位位置。   
// 		        // 当标注显示在地图上时，其所指向的地理位置距离图标左上    
// 		        // 角各偏移10像素和25像素。您可以看到在本例中该位置即是   
// 		        // 图标中央下端的尖角位置。    
// 		        anchor: new BMap.Size(10, 25),    
// 		        // 设置图片偏移。   
// 		        // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您   
// 		        // 需要指定大图的偏移位置，此做法与css sprites技术类似。    
// 		        imageOffset: new BMap.Size(0, 0 - index * 25)   // 设置图片偏移 
// 			});
// 			var marker =new BMap.Marker(point,{icon:myIcon});
// 			map.addOverlay(marker);
// 		}
// 		// 随机向地图添加10个标注    
// var bounds = map.getBounds();    
// var lngSpan = bounds.maxX - bounds.minX;    
// var latSpan = bounds.maxY - bounds.minY;    
// for (var i = 0; i < 10; i ++) {    
//     var point = new BMap.Point(bounds.minX + lngSpan * (Math.random() * 0.7 + 0.15),    
//                                   bounds.minY + latSpan * (Math.random() * 0.7 + 0.15));    
//     addMarker(point, i);    
// }



	    /**
	     * 三、地图平移
	     */
	 //    setTimeout(function(){
		// 	map.panTo(new BMap.Point(116.409, 39.918));
		// }, 2000);
			
		/**
		 * 四、添加控件
		 */
	    // //放大缩小，平移按钮
		// map.addControl(new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL} ));

		/**
		 * 五、自定义控件
		 */
		// // 定义一个控件类，即function    
		// function ZoomControl(){    
		//     // 设置默认停靠位置和偏移量  
		//     this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;    
		//     this.defaultOffset = new BMap.Size(10, 10);    
		// }    
		// // 通过JavaScript的prototype属性继承于BMap.Control   
		// ZoomControl.prototype = new BMap.Control();

		// // 自定义控件必须实现initialize方法，并且将控件的DOM元素返回   
		// // 在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中   
		// ZoomControl.prototype.initialize = function(map){    
		//     // 创建一个DOM元素   
		//     var div = document.createElement("div");    
		//     // 添加文字说明    
		//     div.appendChild(document.createTextNode("放大2级"));    
		//     // 设置样式    
		//     div.style.cursor = "pointer";    
		//     div.style.border = "1px solid gray";    
		//     div.style.backgroundColor = "white";    
		//     // 绑定事件，点击一次放大两级    
		//     div.onclick = function(e){  
		//         map.zoomTo(map.getZoom() + 2);    
		//     }    
		//     // 添加DOM元素到地图中   
		//     map.getContainer().appendChild(div);    
		//     // 将DOM元素返回  
		//     return div;    
		//  }

		//  // 创建控件实例    
		// var myZoomCtrl = new ZoomControl();    
		// // 添加到地图当中    
		// map.addControl(myZoomCtrl);

		/**
		 * 七、个性化地图（1.选择模板、2.个性化编辑方式）
		 * 现在这次用选择模板方式
		 */
		// var mystyle={style:"midnight"};
		// map.setMapStyle(mystyle);


		/**
		 * 八、事件处理 
		 */
		// map.addEventListener("dragend", function(){    
		//     var center = map.getCenter();    
		//     alert("地图中心点变更为：" + center.lng + ", " + center.lat);    
		// 	});
			


		/**
		 * 九、获取地图数据
		 * 
		 */
		 var local = new BMap.LocalSearch(map, {      
		    renderOptions:{map: map}      
		});      
		local.search("天安门");


	</script>
</body>
</html>